<template>
  <div ref="cat-modal">
    <a-modal
        v-model:visible="config.visible"
        :title="controller?.title()"
        :confirmLoading="config.confirmLoading"
        @ok="controller?.submit"

        wrapClassName="cat-modal"
        ok-text="确定"
        cancel-text="取消"
        :maskClosable=false
        :centered=true
        :keyboard=true
        :="$attrs"
    >
      <slot></slot>
    </a-modal>
  </div>
</template>

<script setup lang="ts">

import {type PropType} from "vue";
import ModalController, {type ModalConfig} from "@/components/CatModel/ModalController";

const props = defineProps({
  config: {
    type: Object as PropType<ModalConfig<any, any>>,
    required: true
  },
  controller: {
    type: Object as PropType<ModalController<any, any, any, any>>,
    required: false
  }
});

// defineEmits如果使用枚举，可以正常工作，但是IDE编辑时，vue的template无法识别该事件
const emit = defineEmits(["afterSubmit", "validateFailed"]);

// expose的必须是对象，不能是函数
defineExpose({emit: emit});
</script>

<style lang="less">


</style>

